<template>
  <el-table
    :data="tableData"
    border
    :span-method="objectSpanMethod"
    style="width: 100%; text-align: center; border: 1px solid #d9d9d9"
    :cell-style="{ background: '#ffffff' }"
    :header-cell-style="{
      background: '#ffffff',
      color: '#333',
      fontSize: '13px',
      'text-align': 'center',
    }"
  >
    <el-table-column label="序号" width="50"> </el-table-column>
    <el-table-column
      prop="APTITUDEKINDNAME"
      label="资质类别"
      width="150"
    ></el-table-column>
    <el-table-column
      prop="CertID"
      label="资质证书编号"
      width="200"
    ></el-table-column>
    <el-table-column
      prop="Zzmark"
      label="资质名称"
      width="250"
    ></el-table-column>
    <el-table-column
      prop="OrganDate"
      label="发证日期"
      width="130"
    ></el-table-column>
    <el-table-column
      prop="EndDate"
      label="	发证有效期"
      width="130"
    ></el-table-column>
    <el-table-column
      prop="OrganName"
      label="	发证机关"
      width="178"
    ></el-table-column>
    <el-table-column label="预览" prop="MOVE" width="110">
      <template slot-scope="scope">
        <span
          @click="certInfo(scope.row.CertID, _self.type)"
          style="color: #ff6600; cursor: pointer"
          >证书信息</span
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      tableData: [
        {
          APTITUDEKINDNAME: "安全生产许可",
          CertID: "（浙）JZ安许证字[2014]021262",
          OrganName: "浙江省住房和城乡建设厅",
          UnitMan: "王浩明",
          OrganDate: "2014年10月13日",
          EndDate: "2023年09月23日",
          Zzmark: "",
          TechManDuty: "",
          TechMan: "王晓勤",
        },
        {
          APTITUDEKINDNAME: "建筑业",
          CertID: "D233020828",
          OrganName: "浙江省建设厅",
          UnitMan: "王浩明",
          OrganDate: "2017年07月06日",
          EndDate: "2021年02月03日",
          Zzmark: "电子与智能化工程专业承包贰级",
          TechManDuty: "",
          TechMan: null,
        },
        {
          APTITUDEKINDNAME: "建筑业",
          CertID: "D233020828",
          OrganName: "浙江省建设厅",
          UnitMan: "王浩明",
          OrganDate: "2017年07月06日",
          EndDate: "2021年02月03日",
          Zzmark: "建筑装修装饰工程专业承包贰级",
          TechManDuty: "",
          TechMan: null,
        },
        {
          APTITUDEKINDNAME: "建筑业",
          CertID: "D333011719",
          OrganName: "宁波市住房和城乡建设委员会",
          UnitMan: "王浩明",
          OrganDate: "2017年07月03日",
          EndDate: "2021年12月31日",
          Zzmark: "建筑机电安装工程专业承包叁级",
          TechManDuty: "",
          TechMan: null,
        },
        {
          APTITUDEKINDNAME: "建筑业",
          CertID: "D333011719",
          OrganName: "宁波市住房和城乡建设委员会",
          UnitMan: "王浩明",
          OrganDate: "2017年07月03日",
          EndDate: "2021年12月31日",
          Zzmark: "市政公用工程施工总承包叁级",
          TechManDuty: "",
          TechMan: null,
        },
        {
          APTITUDEKINDNAME: "建筑业",
          CertID: "D333011719",
          OrganName: "宁波市住房和城乡建设委员会",
          UnitMan: "王浩明",
          OrganDate: "2017年07月03日",
          EndDate: "2021年12月31日",
          Zzmark: "建筑工程施工总承包叁级",
          TechManDuty: "",
          TechMan: null,
        },
      ],
    };
  },
  mounted() {
    this.tableDatas(); //目前数据默认是写死，所以直接执行该方法。项目中通过后台数据调用成功后，在表格渲染后执行该方法
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        //合并资质类别
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 2) {
        //合并资质证书号
        const _row = this.contentSpanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 3) {
        //合并资质名称
        const _row = this.contentSpanArr_3[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 4) {
        //发证日期
        const _row = this.contentSpanArr_4[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 5) {
        //发证有效期
        const _row = this.contentSpanArr_5[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 6) {
        //发证机关
        const _row = this.contentSpanArr_6[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
      if (columnIndex === 7) {
        //预览
        const _row = this.contentSpanArr_7[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 表格合并方法
    tableDatas() {
      let contactDot = 0;
      let contactDot_1 = 0;
      let contactDot_2 = 0;
      let contactDot_3 = 0;
      let contactDot_4 = 0;
      let contactDot_5 = 0;
      let contactDot_6 = 0;
      this.spanArr = [];
      this.contentSpanArr = [];
      this.contentSpanArr_3 = [];
      this.contentSpanArr_4 = [];
      this.contentSpanArr_5 = [];
      this.contentSpanArr_6 = [];
      this.contentSpanArr_7 = [];
      this.tableData.forEach((item, index) => {
        item.index = index;
        if (index === 0) {
          this.spanArr.push(1);
          this.contentSpanArr.push(1);
          this.contentSpanArr_3.push(1);
          this.contentSpanArr_4.push(1);
          this.contentSpanArr_5.push(1);
          this.contentSpanArr_6.push(1);
          this.contentSpanArr_7.push(1);
        } else {
          // 判断第二列
          if (item.APTITUDEKINDNAME === this.tableData[index - 1].APTITUDEKINDNAME) {
            this.spanArr[contactDot] =  1 + this.spanArr[contactDot];            
            this.spanArr.push(0);
            console.log(this.spanArr)
          } 
          else {  
            this.spanArr.push(1);
            contactDot = index;
          }
          //判断第三列
          if (item.CertID === this.tableData[index - 1].CertID) {
            this.contentSpanArr[contactDot_1] += 1;
            this.contentSpanArr.push(0);
            this.contentSpanArr_7[contactDot_6] += 1;
            this.contentSpanArr_7.push(0);
          } else {
            this.contentSpanArr.push(1);
            contactDot_1 = index;
            this.contentSpanArr_7.push(1);
            contactDot_6 = index;
          }
          //资质证书编号
          if (item.Zzmark === this.tableData[index - 1].Zzmark) {
            this.contentSpanArr_3[contactDot_2] += 1;
            this.contentSpanArr_3.push(0);
          } else {
            this.contentSpanArr_3.push(1);
            contactDot_2 = index;
          }
          //发证日期
          if (item.OrganDate === this.tableData[index - 1].OrganDate) {
            this.contentSpanArr_4[contactDot_3] += 1;
            this.contentSpanArr_4.push(0);
          } else {
            this.contentSpanArr_4.push(1);
            contactDot_3 = index;
          }
          //发证有效期
          if (item.EndDate === this.tableData[index - 1].EndDate) {
            this.contentSpanArr_5[contactDot_4] += 1;
            this.contentSpanArr_5.push(0);
          } else {
            this.contentSpanArr_5.push(1);
            contactDot_4 = index;
          }
          //发证机关
          if (item.OrganName === this.tableData[index - 1].OrganName) {
            this.contentSpanArr_6[contactDot_5] += 1;
            this.contentSpanArr_6.push(0);
          } else {
            this.contentSpanArr_6.push(1);
            contactDot_5 = index;
          }
        }
      });
    },
  },
};
</script>
<style scoped>
</style>